<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body {
			height: 2000px;
		}

		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">

		window.onload = function () {

			var box1 = document.getElementById("box1");

			/*
			 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
			 * 	但是火狐不支持该属性
			 * 
			 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
			 * 	注意该事件需要通过addEventListener()函数来绑定
			 */


			box1.onmousewheel = function (event) {

				event = event || window.event;

				// event.wheelDelta 可以获取鼠标滚轮滚动的方向
				// 向上滚 120   向下滚 -120, 所有我们只关注正负，不关注大小


				// wheelDelta这个属性火狐中不支持
				// 在火狐中使用event.detail来获取滚动的方向
				// 向上滚 -3  向下滚 3
				// alert(event.detail);


				/*
				 * 当鼠标滚轮向下滚动时，box1变长
				 * 	当滚轮向上滚动时，box1变短
				 */
				//判断鼠标滚轮滚动的方向
				if (event.wheelDelta > 0 || event.detail < 0) {
					//向上滚，box1变短
					if (box1.clientHeight <= 100) return false;
					box1.style.height = box1.clientHeight - 10 + "px";

				} else {
					//向下滚，box1变长
					box1.style.height = box1.clientHeight + 10 + "px";
				}

				/*
				 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
				 * 需要使用event来取消默认行为event.preventDefault();
				 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
				 */
				event.preventDefault && event.preventDefault();

				/*
				 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
				 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
				 */
				return false;
			};

			//为火狐绑定滚轮事件
			bind(box1, "DOMMouseScroll", box1.onmousewheel);

		};

		function bind(obj, eventName, callback) {
				if (obj.addEventListener) {
					obj.addEventListener(eventName, callback, false);
				} else {
					
					// 兼容IE8及以下
					obj.attachEvent("on" + eventName, function() {
						callback.call(obj); // 统一this
					});
				}
			}

	</script>
</head>

<body>
	<div id="box1"></div>
</body>

</html>